<template>
	<view class="motion">
		<checkbox-group @change="checkboxHander" class="motion-list">
			<block v-for="motionListItem in motionList">
				<label class="motion-item">
					<image :src="motionListItem.motionImg" mode="scaleToFill" class="image"></image>
					<view class="load">
						<checkbox class='round blue checkbox' name="motion" :value="motionListItem.motionId" :checked="motionListItem.cheack"></checkbox>
					</view>
					<view class="hot"><text class="title">消耗的热量:</text><text class="hot-text">{{motionListItem.motionHot}}</text></view>
					<view class="text"><text class="title">训练科目:</text>{{motionListItem.motionType}}</view>
				</label>
			</block>
		</checkbox-group>
		<view class="btnsubmit" @click="btnsubmit">
			确定项目
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				motionList: [],
				values: [],
				date: '',
				week: '',
				type: '',
				motionListByDay: []
			};
		},
		onLoad(option) {
			this.date = option.date
			this.week = option.week
			this.type = option.type
			this.motionListByDay = this.$store.getters.getmotionListByDaytype(this.week, this.type)
			this.getMotionList()
		},
		methods: {
			getMotionList() {
				this.$api.getMotionList({}).then(res => {
					if (res.code) {
						this.motionList = res.data
						this.motionList.forEach(item => {
							this.motionListByDay.motionList.forEach(dayItem => {
								if (item.motionId == dayItem.motionId) {
									this.$set(item, 'cheack', true)
								}
							})
						})
					}
				})
			},
			btnsubmit() {
				let list = []
				this.values.forEach(val => {
					list.push((this.motionList.find(motion => {
						return motion.motionId == val
					})))
				})
				this.$store.dispatch('setmotionListByDaytypeAction', {
					list,
					week: this.week,
					type: this.type
				})
				this.$common.navigateBack()
			},
			checkboxHander(e) {
				this.values = e.detail.value
			}
		}
	}
</script>

<style lang="scss">
	.motion {
		padding: 20upx 10upx;

		.motion-list {
			display: flex;
			flex-wrap: wrap;
		}

		.motion-item {
			width: 240upx;
			overflow: hidden;
			position: relative;
			margin: 11upx;
			background-color: #FFFFFF;
			padding: 6upx 10upx 10upx;

			.image {
				width: 220upx;
				height: 220upx;
				margin: 0upx auto;
			}

			.load {
				position: absolute;
				top: -2upx;
				right: 5upx;

				.checkbox {
					transform: scale(0.6, 0.6);
				}
			}

			.text {
				// text-align: center;
				height: 40upx;
				line-height: 40upx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}

			.hot {
				line-height: 30upx;

				.hot-text {
					color: red;
				}
			}

			.title {
				font-size: 22upx;
			}
		}

		
	}
</style>
